<template>
  <div class="responsive-grid-wrapper" :class="gridClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useResponsive } from '@/utils/responsive'

interface Props {
  columns?: {
    xs?: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
  }
  gap?: {
    xs?: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
  }
  padding?: {
    xs?: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
  }
}

const props = withDefaults(defineProps<Props>(), {
  columns: () => ({
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 6
  }),
  gap: () => ({
    xs: 12,
    sm: 16,
    md: 20,
    lg: 24,
    xl: 24
  }),
  padding: () => ({
    xs: 8,
    sm: 12,
    md: 16,
    lg: 20,
    xl: 24
  })
})

const { isMobile, isTablet, isDesktop } = useResponsive()

const gridClasses = computed(() => {
  const classes = ['responsive-grid']
  
  if (isMobile.value) {
    classes.push('responsive-grid--xs')
  } else if (isTablet.value) {
    classes.push('responsive-grid--sm')
  } else if (isDesktop.value) {
    classes.push('responsive-grid--md')
  }
  
  return classes
})

const gridStyle = computed(() => {
  let breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'
  
  if (isMobile.value) breakpoint = 'xs'
  else if (isTablet.value) breakpoint = 'sm'
  else if (isDesktop.value) breakpoint = 'lg'
  
  return {
    '--grid-columns': props.columns[breakpoint],
    '--grid-gap': `${props.gap[breakpoint]}px`,
    '--grid-padding': `${props.padding[breakpoint]}px`
  }
})
</script>

<style scoped>
.responsive-grid-wrapper {
  display: grid;
  gap: var(--grid-gap, 20px);
  padding: var(--grid-padding, 16px);
}

.responsive-grid--xs {
  grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
  gap: var(--grid-gap, 12px);
  padding: var(--grid-padding, 8px);
}

.responsive-grid--sm {
  grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
  gap: var(--grid-gap, 16px);
  padding: var(--grid-padding, 12px);
}

.responsive-grid--md {
  grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
  gap: var(--grid-gap, 20px);
  padding: var(--grid-padding, 16px);
}

.responsive-grid--lg {
  grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
  gap: var(--grid-gap, 24px);
  padding: var(--grid-padding, 20px);
}

/* 响应式断点 */
@media (max-width: 480px) {
  .responsive-grid-wrapper {
    grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
    gap: 12px;
    padding: 8px;
  }
}

@media (max-width: 768px) {
  .responsive-grid-wrapper {
    grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
    gap: 16px;
    padding: 12px;
  }
}

@media (max-width: 992px) {
  .responsive-grid-wrapper {
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 20px;
    padding: 16px;
  }
}

@media (max-width: 1200px) {
  .responsive-grid-wrapper {
    grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
    gap: 24px;
    padding: 20px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .responsive-grid-wrapper {
    gap: calc(var(--grid-gap, 20px) + 4px);
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  .responsive-grid-wrapper {
    padding: calc(var(--grid-padding, 16px) / 2);
  }
}
</style>
